<style>
    .kami-table {
        width: 100%;
        border-collapse: collapse;
        margin: 15px 0;
        font-size: 14px;
    }
    .kami-table th {
        background-color: #F5F5F5;
        padding: 10px 15px;
        text-align: left;
        border: 1px solid #DDD;
        font-weight: bold;
    }
    .kami-table td {
        padding: 8px 15px;
        border: 1px solid #DDD;
        vertical-align: middle;
    }
    .kami-table tr:nth-child(even) {
        background-color: #F9F9F9;
    }
    .kami-table tr:hover {
        background-color: #F0F7FF;
    }
    .kami-table .status-active {
        color: #090;
    }
    .kami-table .status-inactive {
        color: #900;
    }

    /* 弹窗样式 */
    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.4);
    }
    .modal-content {
        background-color: #fefefe;
        margin: 10% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 50%;
    }
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }
    .close:hover {
        color: black;
    }

    #kamiForm {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 20px;
        background: #fff;
        border-radius: 5px;
    }

    #kamiForm label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
        color: #333;
    }

    #kamiForm input[type="text"],
    #kamiForm select {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        box-sizing: border-box;
    }

    #kamiForm input[type="text"]:focus,
    #kamiForm select:focus {
        border-color: #4d90fe;
        outline: none;
        box-shadow: 0 0 5px rgba(77, 144, 254, 0.3);
    }

    #kamiForm button[type="submit"] {
        background-color: #4CAF50;
        color: white;
        padding: 10px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        margin-top: 10px;
    }

    #kamiForm button[type="submit"]:hover {
        background-color: #45a049;
    }
</style>

<!-- 搜索表单 -->
<form name="cpform" method="post" autocomplete="off"  action="{$url_page}" method="get">
    <input type="text" name="id" value="{$query['id']}" placeholder="请输入ID">
    <input type="text" name="name" value="{$query['name']}" placeholder="请输入名称">
    <select name="extcredits">
        <option value="">全部积分类型</option>
        <!--{loop $extcredits_data $i $credit}-->
            <!--{if $credit['available'] && !empty($credit['title'])}-->
                <option value="{$i}" <!--{if $query['extcredits'] == $i}-->selected<!--{/if}-->>{$credit['title']} (extcredits{$i})</option>
            <!--{/if}-->
        <!--{/loop}-->
    </select>
    <input type="text" name="credit" value="{$query['credit']}" placeholder="请输入积分">
    <select name="pagesize">
        <option value="10" {if $pagesize == 10}selected{/if}>10条/页</option>
        <option value="20" {if $pagesize == 20}selected{/if}>20条/页</option>
        <option value="50" {if $pagesize == 50}selected{/if}>50条/页</option>
        <option value="100" {if $pagesize == 100}selected{/if}>100条/页</option>
    </select>
    <!-- <input type="text" name="page" value="{$page}"> -->
    <input type="submit" value="搜索">
</form>
<button type="button" onclick="showModifyForm()">新增</button>
<!-- 列表 -->
<table class="kami-table">
    <tr>
        <th width="5%">ID</th>
        <th width="10%">名称</th>
        <th width="10%">积分类型</th>
        <th width="5%">积分</th>
        <th width="10%">描述</th>
        <th width="10%">排序</th>
        <th width="10%">操作</th>
    </tr>
    <!--{loop $kami_list $kami}-->
    <tr>
        <td>{$kami['id']}</td>
        <td>{$kami['name']}</td>
        <td>{$extcredits_data[$kami['extcredits']]['title']}</td>
        <td>{$kami['credit']}</td>
        <td>{$kami['desc']}</td>
        <td>{$kami['sort']}</td>
        <td>
            <button type="button" onclick='showModifyForm({echo json_encode($kami)})'>编辑</button>
            <button type="button" onclick="confirmDelete({$kami['id']}, '{$kami['name']}')">删除</button>
        </td>
    </tr>
    <!--{/loop}-->
</table>
<!-- 分页 -->
{$multipage}

<div id="kamiModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <form id="kamiForm" action="{$url_page}&action_kami_buy=add" name="cpform" method="post" autocomplete="off">
            <input type="hidden" name="formhash" value="{FORMHASH}">
            <h2 style="font-size: large;margin-bottom: 20px;">添加/编辑类型</h2>
            <label for="name">名称:</label>
            <input type="text" id="name" name="name" required>

            <label for="extcredits">积分类型:</label>
            <select id="extcredits" name="extcredits" required>
                <!--{loop $extcredits_data $i $credit}-->
                    <!--{if $credit['available'] && !empty($credit['title'])}-->
                    <option value="{$i}">{$credit['title']} (extcredits{$i})</option>
                    <!--{/if}-->
                <!--{/loop}-->
            </select>
            
            <label for="credit">积分:</label>
            <input type="text" id="credit" name="credit" required>

            <label for="desc">描述:</label>
            <textarea type="text" id="desc" name="desc"></textarea>
            
            <label for="sort">排序:</label>
            <input type="number" id="sort" name="sort" min="0" required>
            
            <button type="submit">提交</button>
        </form>
    </div>
</div>


<script>
    function confirmDelete(id, name) {
        if(confirm('确定删除吗？删除【' + name + '】分类会同时删除【该分类下的所有卡密】')) {

            window.location.href = '{$url_page}&action_kami_buy=delete&action_kami_buy_id=' + id + '&formhash={FORMHASH}';
        }
    }

    // 弹窗
    function showModifyForm(kami = '') {
        const modal = document.getElementById('kamiModal');
        const form = document.getElementById('kamiForm');
        if(kami) {
            // 编辑
            form.action = '{$url_page}&action_kami_buy=edit&action_kami_buy_id=' + kami.id;
            document.getElementById('name').value = kami.name;
            document.getElementById('extcredits').value = kami.extcredits;
            document.getElementById('credit').value = kami.credit;
            document.getElementById('sort').value = kami.sort;
            document.getElementById('desc').value = kami.desc;

        } else {
            // 新增
            form.action = '{$url_page}&action_kami_buy=add';
            form.reset();
        }
        
        modal.style.display = 'block';
    }

    function closeModal() {
        document.getElementById('kamiModal').style.display = 'none';
    }

    // 模态框关闭
    window.onclick = function(event) {
        const modal = document.getElementById('kamiModal');
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    }
</script>